{% extends 'common_tpl.html' %}
{% load set_value %}
{% block content %}

    <div class="container" style="margin-top: 20px;">
        <h3>订单列表</h3>
        <div class="list-group">
            {% for order in orders %}
                {% set hmark = 'hide' %}
                {% if order.order_status == 1 %}
                    {% set mark = 'warning' %}
                    {% set hmark = '' %}
                {% elif order.order_status == 2 %}
                    {% set mark = 'success' %}
                {% else %}
                    {% set mark = 'info' %}
                {% endif %}
                <div class="list-group-item list-group-item-{{ mark }}">
                    <div>订单编号:{{ order.order_num }}</div>
                    <table class="table" style="margin-top: 10px">
                        <tbody>
                        <tr>
                            <td>权限名称:{{ order.order_right.title }}</td>
                            <td>数量:{{ order.order_quantity }}</td>
                            <td>单价:{{ order.order_right.price }}</td>
                            <td>总价:{{ order.order_price }}</td>
                            <td>创建时间:{{ order.create_time }}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="display: flex;justify-content:space-between;">
                        <div>状态:{{ order.get_order_status_display }}</div>
                        <button order_number="{{ order.order_num }}" class="btn btn-info btn-sm {{ hmark }} pay">继续支付</button>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% csrf_token %}
{% endblock %}
{% block js %}
    <script>
        $(function () {
            bindPay();
        })

        function bindPay() {
            $(".pay").click(function () {
                $.ajax({
                    url: "{% url 'main:api_payment' %}",
                    headers: {
                        'X-CSRFTOKEN': $("[name='csrfmiddlewaretoken']").val()
                    },
                    data: {
                        order_num:$(this).attr("order_number"),
                    },
                    dataType: 'json',
                    type: 'post',
                    success: function (res) {
                        console.log(res)
                        if (res.ret === 0) {
                            location.href = res.payurl
                        }
                    }

                })
            })
        }
    </script>
{% endblock %}
